<template>
	<view class="content">
		<view class="wrap" style="background: rgb(229,238,217);">
			<view>地点</view>
			<view>正常值</view>
			<view>位移值</view>
			<view>一级</view>
			<view>二级</view>
			<view>三级</view>
		</view>
		<scroll-view scroll-y class="scroll">
			<view class="wrap"  v-for="item,index in data" :style="{borderWidth:'0rpx',backgroundColor:index%2==1?'#FAFAFA':'white'}">
				<view>{{item.name}}</view>
				<view>-</view>
				<view>-</view>
				<view>-</view>
				<view>-</view>
				<view>-</view>
			</view>
			<view style="height: 100rpx;border-width: 0rpx;"/>
		</scroll-view>
	</view>
</template>

<script>
	import API from '@/common/api.js';
	import flipcountdown from '@/components/flipcountdown-uni/flipcountdown-uni.vue'
	var _self = null;
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				pzhAuthorization: uni.getStorageSync('pzhAuthorization'),
				data: [{
						name: '观音岩管桥',
						a: 1,
						b: 2
					},
					{
						name: '陶家渡管桥',
						a: 1,
						b: 2
					},
					{
						name: '新庄管桥',
						a: 1,
						b: 2
					},
					{
						name: '荷花池管桥',
						a: 1,
						b: 2
					},
					{
						name: '密地管桥',
						a: 1,
						b: 2
					},
				],
				timer: null,
				ss: 0,
				lj: 0,
				tickOne: function tick() {
					return this.propsDataOrNum = Number(_self.ss).toFixed(2)
				},
			}
		},
		onLoad(options) {
			_self = this
			// this.socket()
		},
		onUnload() {
			clearInterval(this.timer)
			uni.closeSocket()
		},
		methods: {
			socket() {
				uni.connectSocket({
					url: 'wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization=' + this.pzhAuthorization
				});
				uni.onSocketOpen((res) => {
					console.log('WebSocket连接已打开！');
					uni.sendSocketMessage({
						data: "getFSKTargetValues()"
					})
					this.timer = setInterval(() => {
						uni.sendSocketMessage({
							data: "getFSKTargetValues()"
						})
					}, 5000)
				});

				uni.onSocketMessage((res) => {
					let obj = JSON.parse(res.data)
                    if(obj.functionCode!='getFSKTargetValues'){
                        return
                    }
					this.data = []
					this.ss = 0
					obj.datas.forEach((item, index) => {
						if (index % 3 == 0) {
							let data = {
								name: item.sbmc.substring(item.sbmc.indexOf('#') + 1, item.sbmc.length),
								lj: this.changeNum(item.value),
								ss: this.changeNum(obj.datas[index + 1].value),
								tjf: this.changeNum(obj.datas[index + 2].value)
							}
							this.data.push(data)
							this.ss += parseFloat(data.ss)
						}
					})

				});
			},
			changeNum(num) {
				return Number(Math.floor(Number(num) * 100) / 100).toFixed(2)
			}
		}
	}
</script>
<style scoped>
	/* #ifndef H5 */
	.content>>>.xdsoft_flipcountdown>.xdsoft_digit {
		transition-property: background-position;
		transition-duration: 0.5s;
	}

	/* #endif */
</style>
<style lang="less" scoped>
	.content {
		background: white;
		.wrap {
			display: flex;
			text-align: center;
			border-top: 2rpx solid #dcdfe6;
			border-bottom: 2rpx solid #dcdfe6;
			flex-wrap: wrap;
			view {
				font-size: 26rpx;
				padding: 10rpx 0;
				width: 16.666vw;
				display: flex;
				line-height: 40rpx;
				flex-direction: column;
				justify-content: center;
			}
		}

		.scroll {
			height: calc(100vh - 62rpx);

			view {
				color: #777777;
				border-bottom: 2rpx solid #dcdfe6;
			}
		}

		.qiun-common-mt {
			margin-top: 10upx;
		}

		.qiun-bg-white {
			background: #FFFFFF;
		}

		.qiun-title-bar {
			width: 96%;
			padding: 10upx 2%;
			flex-wrap: nowrap;
		}

		.qiun-title-dot-light {
			border-left: 10upx solid #0ea391;
			padding-left: 10upx;
			font-size: 32upx;
			color: #000000
		}
	}
</style>
